<template>
	<div class="nav-bar">
		<div class="left">
			<img class="logo am-margin-right-sm" src="../assets/img/common/logo.png">
			<i :class="isOpen" @click="toggle"></i>
		</div>
		<el-menu mode="horizontal" background-color="#31404e" text-color="#fff" active-text-color="#ffd04b">
			<el-menu-item index="1">站点设置</el-menu-item>
			<el-menu-item index="2">预览网站</el-menu-item>
			<el-submenu index="3">
				<!-- 插槽 slot -->
				<template slot="title">
					<el-avatar :src="profile.avatar"></el-avatar>
					<span class="username">{{ profile.fullname }}</span>
				</template>
				<el-menu-item index="/account/info">账户设置</el-menu-item>
				<el-menu-item>消息通知</el-menu-item>
				<el-menu-item @click="handleLogout">退出登录</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import reset_router from '@/router/reset_router';
import { mapGetters, mapMutations, mapState, mapActions } from 'vuex';

export default {
	data() {
		return {

		}
	},
	created() {
		// 加载登录人信息
		let user_id = sessionStorage.user_id;
		this.current_info({ user_id });
	},
	computed: {
		...mapState('account', ['profile']),
		...mapGetters('fold', ['isOpen']),
	},
	methods: {
		...mapMutations('fold', ['toggle']),
		...mapActions('account', ['current_info']),

		// 退出登录
		handleLogout() {
			// 清空sessionStorage
			sessionStorage.removeItem('access_token');
			sessionStorage.removeItem('refresh_token');
			sessionStorage.removeItem('user_id');
			sessionStorage.removeItem('role_id');
			// 重置路由
			reset_router();
			// 跳转页面
			this.$router.replace('/login');
		}
	}
}
</script>

<style lang="less" scoped>
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		display: flex;
		align-items: center;

		.logo {
			height: 50px;
		}
	}

	.el-menu {
		border: 1px solid #31404e;
	}

	.username {
		margin-left: 10px;
	}
}
</style>
